<template>
  <div class="home-container">
    <!-- Header -->
    <div class="header">
      <img src="../assets/images/home/TOP.png" alt="Header Background" class="header-bg">
    </div>

    <!-- Top Icons Section - Dynamically Generated from Routes -->
    <div class="top-icons-wrapper">
      <!-- Left Arrow -->
      <button v-if="showArrows && canScrollLeft" @click="scrollIcons('left')" class="scroll-arrow left-arrow">&lt;</button>
      
      <div class="top-icons-viewport">
        <transition-group name="fade-list" tag="div" class="top-icons-section" appear :style="iconsContainerStyle">
          <router-link v-for="(item, index) in dynamicTopItems" :key="item.routeName" :to="{ name: item.routeName }"
                      class="icon-item-link"
                      @mouseenter="showMenu(index)"
                      @mouseleave="hideMenu">
            <div class="icon-item" :style="{ transitionDelay: `${index * 0.05}s` }">
              <div class="icon-bg">
                <img :src="getImagePath(item.icon)" :alt="item.label" class="float-target top-icon-img">
              </div>
              <transition name="fade" appear :style="{ transitionDelay: `${index * 0.05 + 0.1}s` }">
                <div class="label">{{ item.label }}</div>
              </transition>
            </div>

            <!-- Radial Menu Container -->
            <transition name="radial-menu-fade">
                <div class="radial-menu"
                    v-if="activeMenuIndex === index && item.children && item.children.length > 0"
                    @mouseenter="cancelHideMenu" 
                    @mouseleave="hideMenu">
                    <router-link v-for="(child, childIndex) in item.children" :key="child.routeName"
                                :to="{ name: child.routeName }"
                                class="radial-menu-item"
                                :style="getRadialStyle(childIndex, item.children.length)">
                        {{ child.label }}
                    </router-link>
                </div>
            </transition>
          </router-link>
        </transition-group>
      </div>

      <!-- Right Arrow -->
      <button v-if="showArrows && canScrollRight" @click="scrollIcons('right')" class="scroll-arrow right-arrow">&gt;</button>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Left Section -->
      <transition name="slide-fade-left" appear>
        <div class="left-section">
          <div class="list-card">
            <div class="list-header">
              <span class="header-icon">CAL2150数字KPI</span>
            </div>
            <div class="list-content">
              <div class="data-row">
                <transition-group name="fade-list-data" tag="div" class="data-item" appear>
                  <div :key="'val1'" class="value">1554.0吨</div>
                  <div :key="'lab1'" class="label">日产量统计</div>
                  <img :key="'img1'" src="../assets/images/home/组 26(3).png" alt="日产" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.1s' }">
                  <div :key="'val2'" class="value">150.3吨</div>
                  <div :key="'lab2'" class="label">实际小时吨</div>
                  <img :key="'img2'" src="../assets/images/home/组 26(2).png" alt="实际" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.2s' }">
                  <div :key="'val3'" class="value">163.0吨</div>
                  <div :key="'lab3'" class="label">小时吨</div>
                  <img :key="'img3'" src="../assets/images/home/组 26(1).png" alt="吨钢" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.3s' }">
                  <div :key="'val4'" class="value">139.0(mpm)</div>
                  <div :key="'lab4'" class="label">工艺段速度</div>
                  <img :key="'img4'" src="../assets/images/home/组 26.png" alt="速度" class="list-icon-img">
                </transition-group>
              </div>
            </div>
          </div>
          <div class="list-card">
            <div class="list-header">
              <span class="header-icon">CAL1630数字KPI</span>
            </div>
            <div class="list-content">
              <div class="data-row">
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.4s' }">
                  <div :key="'val5'" class="value">1554.0吨</div>
                  <div :key="'lab5'" class="label">日产量统计</div>
                  <img :key="'img5'" src="../assets/images/home/组 26(3).png" alt="日产" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.5s' }">
                  <div :key="'val6'" class="value">150.3吨</div>
                  <div :key="'lab6'" class="label">实际小时吨</div>
                  <img :key="'img6'" src="../assets/images/home/组 26(2).png" alt="实际" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.6s' }">
                  <div :key="'val7'" class="value">163.0吨</div>
                  <div :key="'lab7'" class="label">小时吨</div>
                  <img :key="'img7'" src="../assets/images/home/组 26(1).png" alt="吨钢" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.7s' }">
                  <div :key="'val8'" class="value">139.0(mpm)</div>
                  <div :key="'lab8'" class="label">工艺段速度</div>
                  <img :key="'img8'" src="../assets/images/home/组 26.png" alt="速度" class="list-icon-img">
                </transition-group>
              </div>
            </div>
          </div>
          <div class="list-card">
            <div class="list-header">
              <span class="header-icon">CGL1870数字KPI</span>
            </div>
            <div class="list-content">
              <div class="data-row">
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.8s' }">
                  <div :key="'val9'" class="value">2500.0吨</div>
                  <div :key="'lab9'" class="label">日产量统计</div>
                  <img :key="'img9'" src="../assets/images/home/组 26(3).png" alt="日产" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.9s' }">
                  <div :key="'val10'" class="value">210.5吨</div>
                  <div :key="'lab10'" class="label">实际小时吨</div>
                  <img :key="'img10'" src="../assets/images/home/组 26(2).png" alt="实际" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '1.0s' }">
                  <div :key="'val11'" class="value">220.0吨</div>
                  <div :key="'lab11'" class="label">小时吨</div>
                  <img :key="'img11'" src="../assets/images/home/组 26(1).png" alt="吨钢" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '1.1s' }">
                  <div :key="'val12'" class="value">180.0(mpm)</div>
                  <div :key="'lab12'" class="label">工艺段速度</div>
                  <img :key="'img12'" src="../assets/images/home/组 26.png" alt="速度" class="list-icon-img">
                </transition-group>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <!-- Center Section -->
      <div class="center-section">
        <!-- Markers -->
        <transition-group name="pulse-marker" tag="div" appear>
          <div v-for="(marker, index) in mapMarkers" :key="marker.id" class="map-marker float-target"
            :style="{ top: marker.top, left: marker.left, transitionDelay: `${0.5 + index * 0.1}s`, animationDelay: `${Math.random() * 1}s` }">
            <div class="marker-content hover-target">
              <div class="marker-circle">{{ marker.id }}</div>
              <div class="marker-label">{{ marker.label }}</div>
            </div>
            <img src="../assets/images/home/组 7.png" alt="arrow" class="marker-arrow">
          </div>
        </transition-group>
      </div>

      <!-- Right Section -->
      <transition name="slide-fade-right" appear>
        <div class="right-section">
          <!-- New TCM2280 Digital Twin Card -->
          <div class="list-card">
            <div class="list-header">
              <span class="header-icon">TCM2280数字KPI</span>
            </div>
            <div class="list-content">
              <div class="data-row">
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.1s' }">
                  <div :key="'val_tcm_1'" class="value">4500吨</div>
                  <div :key="'lab_tcm_1'" class="label">TCM日产</div>
                  <img :key="'img_tcm_1'" src="../assets/images/home/组 26(3).png" alt="TCM日产" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.2s' }">
                  <div :key="'val_tcm_2'" class="value">300吨</div>
                  <div :key="'lab_tcm_2'" class="label">TCM小时吨</div>
                  <img :key="'img_tcm_2'" src="../assets/images/home/组 26(2).png" alt="TCM小时吨" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.3s' }">
                  <div :key="'val_tcm_3'" class="value">95%</div>
                  <div :key="'lab_tcm_3'" class="label">TCM成材率</div>
                  <img :key="'img_tcm_3'" src="../assets/images/home/组 26(1).png" alt="TCM成材率" class="list-icon-img">
                </transition-group>
                <transition-group name="fade-list-data" tag="div" class="data-item" appear :style="{ transitionDelay: '0.4s' }">
                  <div :key="'val_tcm_4'" class="value">88%</div>
                  <div :key="'lab_tcm_4'" class="label">TCM设备OEE</div>
                  <img :key="'img_tcm_4'" src="../assets/images/home/组 26.png" alt="TCM设备OEE" class="list-icon-img">
                </transition-group>
              </div>
            </div>
          </div>

          <!-- Existing Total Production Card -->
          <div class="list-card">
            <div class="list-header">
              <span class="header-icon">总产量</span>
            </div>
            <transition-group name="fade-list-data" tag="div" class="list-content right-list-content" appear>
              <div :key="'r_item1'" class="right-data-item hover-target" :style="{ transitionDelay: '0.1s' }">
                <img src="../assets/images/home/组 31(2).png" alt="日产量" class="list-icon-img">
                <div>
                  <div class="label">日产量</div>
                  <div class="value">3933吨</div>
                </div>
              </div>
              <div :key="'r_item2'" class="right-data-item hover-target" :style="{ transitionDelay: '0.2s' }">
                <img src="../assets/images/home/组 32(2).png" alt="日产记录" class="list-icon-img">
                <div>
                  <div class="label">日产记录</div>
                  <div class="value">10451吨</div>
                </div>
              </div>
              <div :key="'r_item3'" class="right-data-item hover-target" :style="{ transitionDelay: '0.3s' }">
                <img src="../assets/images/home/组 31(1).png" alt="月产量" class="list-icon-img">
                <div>
                  <div class="label">月产量</div>
                  <div class="value">95625吨</div>
                </div>
              </div>
              <div :key="'r_item4'" class="right-data-item hover-target" :style="{ transitionDelay: '0.4s' }">
                <img src="../assets/images/home/组 32(1).png" alt="月产记录" class="list-icon-img">
                <div>
                  <div class="label">月产记录</div>
                  <div class="value">214901吨</div>
                </div>
              </div>
              <div :key="'r_item5'" class="right-data-item hover-target" :style="{ transitionDelay: '0.5s' }">
                <img src="../assets/images/home/组 31.png" alt="月完成量" class="list-icon-img">
                <div>
                  <div class="label">月完成量</div>
                  <div class="value">197500吨</div>
                </div>
              </div>
              <div :key="'r_item6'" class="right-data-item hover-target" :style="{ transitionDelay: '0.6s' }">
                <img src="../assets/images/home/组 32.png" alt="月完成度" class="list-icon-img">
                <div>
                  <div class="label">月完成度</div>
                  <div class="value">48%</div>
                </div>
              </div>
            </transition-group>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, CSSProperties, onMounted } from 'vue';
import { routerArray } from '../router/routers';
import { RouteRecordRaw } from 'vue-router';

// Reverted to use new URL() for proper path resolution in Vite
const getImagePath = (name: string): string => {
  // Construct the path relative to the 'src' directory
  // Using relative paths directly for build compatibility
  if (!name) return ''; // Handle cases where icon might be missing
  try {
      return new URL(`/src/assets/images/home/${name}`, import.meta.url).href;
  } catch (e) {
      console.error(`Failed to load image: ${name}`, e);
      return ''; // Return empty string or placeholder path on error
  }
};

// --- START: Icon Scrolling Logic ---
const ICONS_PER_PAGE = 12;
const currentIconIndex = ref(0); // The starting index of visible icons

const showArrows = computed(() => dynamicTopItems.value.length > ICONS_PER_PAGE);

const canScrollLeft = computed(() => currentIconIndex.value > 0);
const canScrollRight = computed(() => currentIconIndex.value < dynamicTopItems.value.length - ICONS_PER_PAGE);

const scrollIcons = (direction: 'left' | 'right') => {
  const step = 1; // Scroll one icon at a time
  if (direction === 'left' && canScrollLeft.value) {
    currentIconIndex.value = Math.max(0, currentIconIndex.value - step);
  } else if (direction === 'right' && canScrollRight.value) {
    currentIconIndex.value = Math.min(
      dynamicTopItems.value.length - ICONS_PER_PAGE,
      currentIconIndex.value + step
    );
  }
};

const iconsContainerStyle = computed(() => {
  const totalIcons = dynamicTopItems.value.length;
  if (totalIcons <= ICONS_PER_PAGE) {
    return {
      display: 'flex',
      justifyContent: 'space-around', // Keep original layout if no scroll needed
    };
  }

  // The container's width is set to be large enough to hold all icons in a single line
  const totalWidthPercent = (totalIcons / ICONS_PER_PAGE) * 100;

  // The translation percentage is relative to the container's own width.
  // We want to scroll by `currentIconIndex` items.
  // The width of `currentIconIndex` items as a percentage of the total container width is (currentIndex / totalIcons).
  const translateXPercent = -(currentIconIndex.value / totalIcons) * 100;

  return {
    '--total-icons': totalIcons,
    display: 'grid',
    width: `${totalWidthPercent}%`,
    transform: `translateX(${translateXPercent}%)`,
    transition: 'transform 0.4s ease-out',
  };
});
// --- END: Icon Scrolling Logic ---

interface TopItem {
  icon: string;
  label: string;
  routeName: string;
  children?: TopItem[];
}

const availableIcons = [
  '组 14.png', '组 15.png', '组 16.png', '组 18.png',
  '组 19.png', '组 21.png', '组 22.png', '组 23.png',
  '组 24.png', '组 25.png', '组 45.png', '组 46.png'
];

function collectType1Routes(
  routes: readonly RouteRecordRaw[],
  icons: string[],
  iconIndex: { value: number }
): TopItem[] {
  const result: TopItem[] = [];
  for (const route of routes) {
    if (route.meta?.type === 1 && route.name) {
      result.push({
        icon: icons[iconIndex.value % icons.length],
        label: ((route.meta?.translated as string) || (route.meta?.title as string) || String(route.name) || ""),
        routeName: String(route.name),
        children: route.children
          ? collectType1Routes(route.children, icons, iconIndex)
          : undefined
      });
      iconIndex.value++;
    } else if (route.children && route.children.length > 0) {
      result.push(...collectType1Routes(route.children, icons, iconIndex));
    }
  }
  return result;
}

const dynamicTopItems = computed<TopItem[]>(() => {
  return collectType1Routes(routerArray, availableIcons, { value: 0 });
});

// Ref to track hovered item index for radial menu
const activeMenuIndex = ref<number | null>(null);
let hideMenuTimeout: number | null = null; // Timeout for delayed hiding

const showMenu = (index: number) => {
    if (hideMenuTimeout) {
        clearTimeout(hideMenuTimeout);
        hideMenuTimeout = null;
    }
    activeMenuIndex.value = index;
};

const hideMenu = () => {
    // Delay hiding slightly to allow moving mouse onto the menu
    hideMenuTimeout = window.setTimeout(() => {
         activeMenuIndex.value = null;
         hideMenuTimeout = null;
    }, 200); // Adjust delay as needed
};

const cancelHideMenu = () => {
     if (hideMenuTimeout) {
        clearTimeout(hideMenuTimeout);
        hideMenuTimeout = null;
    }
};

// Function to calculate style for radial menu items
const getRadialStyle = (index: number, total: number): CSSProperties => {
    const angleDeg = (360 / Math.max(1, total)) * index - 90; // Start from top (-90deg)
    const angleRad = angleDeg * (Math.PI / 180);
    const radius = 80; // Adjust radius of the circle
    const x = radius * Math.cos(angleRad);
    const y = radius * Math.sin(angleRad);

    // Add transition delay for fanning out effect
    const delay = index * 0.05; // Stagger the appearance

    return {
        transform: `translate(${x}px, ${y}px) scale(0.8)`, // Start slightly smaller
        transitionDelay: `${delay}s`
    };
};

const mapMarkers = ref([
  { id: '01', label: '2280酸轧', top: '58%', left: '88%' }, // Adjusted positions
  { id: '02', label: '2150连退', top: '40%', left: '80%' },
  { id: '03', label: '1630连退', top: '32%', left: '65%' },
  { id: '04', label: '1870镀锌', top: '28%', left: '50%' },
  { id: '05', label: '2150重卷', top: '52%', left: '50%' },
  { id: '06', label: '1630重卷', top: '45%', left: '35%' }, // Adjusted positions
  { id: '07', label: '1870重卷', top: '40%', left: '20%' },
]);

// Log computed data after mount
onMounted(() => {
    console.log('Dynamic Top Items:', dynamicTopItems.value);
});

</script>

<style scoped>
/* Float Animation */
@keyframes float-up-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px); /* Adjust float height */
  }
}

/* Apply float animation ONLY to targets that should float (top icons, map markers) */
.float-target {
  animation: float-up-down 3s ease-in-out infinite;
}

/* --- START: Icon Scrolling Styles --- */
/* Wrapper for the scrollable icons and arrows */
.top-icons-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96%;
  margin: 0 auto;
  padding: 15px 0; /* Use viewport for horizontal spacing */
  box-sizing: border-box;
  z-index: 5;
}
/* Viewport that clips the icons */
.top-icons-viewport {
  overflow: hidden;
  width: 100%;
}
/* Arrows for scrolling */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%); /* Adjust vertical alignment */
  z-index: 10;
  background-color: rgba(0, 174, 255, 0.2);
  border: 1px solid rgba(0, 174, 255, 0.5);
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  transition: background-color 0.3s ease, transform 0.3s ease;
  padding: 0;
  text-shadow: 0 0 5px #000;
}
.scroll-arrow:hover {
  background-color: rgba(0, 174, 255, 0.5);
  transform: translateY(-60%) scale(1.1);
}
.left-arrow {
  left: 0px;
}
.right-arrow {
  right: 0px;
}
/* --- END: Icon Scrolling Styles --- */

/* Base transition for list icons (no float) */
.list-icon-img {
   transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effects for LIST icons */
.data-item:hover .list-icon-img,
.right-data-item.hover-target:hover .list-icon-img {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* Base transition for TOP icons */
.top-icon-img {
    transition: transform 0.25s ease-out, filter 0.3s ease; /* Adjusted timing */
}

/* Clearer Hover effects for TOP icons */
/* Apply hover to the link for better interaction area */
.icon-item-link:hover .top-icon-img.float-target {
  transform: scale(1.3);
  filter: drop-shadow(0 0 8px rgba(0, 234, 255, 0.7));
  animation-play-state: paused;
}

/* Active (press) effect for TOP icons */
/* Apply active state to the link */
.icon-item-link:active .top-icon-img.float-target {
  transform: scale(0.9) translateY(3px);
  filter: brightness(0.85) drop-shadow(0 0 5px rgba(0, 234, 255, 0.5));
  transition-duration: 0.1s;
  animation-play-state: paused;
}

/* Ensure perspective for 3D rotation on top icons (keep in case needed later) */
.icon-item {
    perspective: 1000px;
}

/* Hover for Map Markers */
.map-marker.float-target:hover {
    animation-play-state: paused; /* Pause marker float on hover */
}

.map-marker:hover .marker-content.hover-target {
   transform: scale(1.15); /* Scale up marker content */
   box-shadow: 0 0 15px rgba(0, 174, 255, 0.8); /* Add glow */
}

.marker-content.hover-target {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* General Fade Transition */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* List Fade Transition (Staggered) */
.fade-list-enter-active,
.fade-list-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-list-enter-from,
.fade-list-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

/* Data Item Fade */
.fade-list-data-enter-active,
.fade-list-data-leave-active {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fade-list-data-enter-from,
.fade-list-data-leave-to {
    opacity: 0;
    transform: translateY(8px);
}

/* Slide Fade Left */
.slide-fade-left-enter-active {
  transition: all 0.6s ease-out;
}
.slide-fade-left-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-left-enter-from,
.slide-fade-left-leave-to {
  transform: translateX(-30px);
  opacity: 0;
}

/* Slide Fade Right */
.slide-fade-right-enter-active {
  transition: all 0.6s ease-out;
}
.slide-fade-right-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

/* Marker Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 174, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 174, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 174, 255, 0);
  }
}

.pulse-marker-enter-active {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.pulse-marker-enter-from {
    opacity: 0;
    transform: scale(0.5) translateX(-50%);
}

.home-container {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/images/home/BG.png');
  /* Reverted to @ alias */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 60px;
  /* Increased height */
  position: relative;
  z-index: 10;
}

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-icons-section {
  /* display is now controlled by iconsContainerStyle */
  align-items: flex-start;
  padding: 15px 0; /* Use viewport for horizontal spacing */
  position: relative;
  z-index: 5;
  /* When display: grid is active, these styles will apply */
  grid-template-columns: repeat(var(--total-icons, 12), 1fr);
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* flex-shrink and flex-basis are moved to the link wrapper */
  position: relative; /* Needed for absolute positioning of radial menu */
}

.icon-bg {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Needed for absolute positioning of radial menu */
  box-sizing: border-box;

  /* --- NEW --- */
  /* Remove flex-basis and use padding for spacing */
  flex-shrink: 0;
  padding: 0 2px; /* Reduced padding for smaller gaps */
}

.icon-bg img {
  max-width: 100%;
  max-height: 100%;
}

.percentage {
  font-size: 18px;
  /* Slightly larger */
  font-weight: bold;
  color: #00eaff;
  margin-bottom: 5px;
  /* Increased space */
}

.label {
  font-size: 12px; /* Reduced font size */
  color: #ccc;
  line-height: 1.3;
  /* Allow normal wrapping */
  white-space: normal;
  overflow: visible; /* Ensure text is not hidden */
  text-overflow: clip; /* Remove ellipsis */
  text-align: center;
  width: 100px; /* Ensure it uses the container width */
  margin-top: 0px; /* Reset margin, handled by icon-bg margin */
  word-break: break-word; /* Still allow breaking words */
}

.main-content {
  flex-grow: 1;
  display: flex;
  padding: 10px 1% 20px 1%;
  /* Adjusted padding (less top padding) */
  position: relative;
  z-index: 1;
  gap: 20px;
  /* Add gap between main sections */
}

.left-section,
.right-section {
  width: 26%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* This will be the gap between cards in these sections */
}

.center-section {
  flex-grow: 1;
  position: relative;
  display: flex;
  /* Use flex for centering map elements */
  justify-content: center;
  align-items: center;
  /* Removed margin for gap control in parent */
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  /* Adjust height for cards in right-section to share space */
}

.factory-map-outline {
  position: relative;
  /* Relative to center section */
  max-width: 100%;
  max-height: 100%;
  /* Allow map outline to fill space */
  object-fit: contain;
  z-index: 2;
  /* Above background */
}

.list-card {
  background-color: rgba(3, 10, 29, 0.85);
  /* Slightly more opaque */
  border: 1px solid #0a2f5f;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  /* Adjust height for cards in right-section to share space */
  height: calc((100% - 40px) / 3); /* This rule is for .list-card in general (e.g. left-section) */
}

.right-section .list-card:nth-child(1) { /* TCM2280 card */
  height: calc((100% - 20px) / 3);
}

.right-section .list-card:nth-child(2) { /* 总产量 card */
  height: calc(2 * (100% - 20px) / 3);
}

.list-header {
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 15px;
  /* Increased space */
  border-bottom: 1px solid #0a2f5f;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Prevent header shrinking */
  background-image: url('../assets/images/home/tit-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.header-icon {
  margin-left: 42px;
  font-size: 14px;
}

.list-content {
  flex-grow: 1;
  /* Allow content to fill space */
  display: flex;
  /* Enable flex for content alignment */
  flex-direction: column;
  /* Stack content vertically */
  justify-content: space-around;
  /* Distribute space in left cards */
}

/* Left section specific content alignment */
.left-section .list-content {
  justify-content: center;
  /* Center items vertically */
}

.data-row {
  display: flex;
  justify-content: space-around;
  /* Distribute items evenly */
  align-items: center;
  /* Align items vertically */
  width: 100%;
  /* Ensure row takes full width */
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  /* Allow items to share space */
  min-width: 0;
  /* Prevent overflow */
}

.data-item .value {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #00eaff;
  white-space: nowrap;
  /* Prevent wrapping */
}

.data-item .label {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 8px;
  white-space: nowrap;
  /* Prevent wrapping */
}

.data-item img {
  width: 70px;
  /* Adjusted icon size */
  height: 40px;
}

/* Right Section Specific Styles */
.right-list-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  /* Equal height rows */
  gap: 10px 15px;
  /* Row gap, Column gap */
  align-items: center;
  height: 100%;
  padding: 10px 0;
  margin-left: 60px;
  /* Add some vertical padding */
}

.right-data-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.right-data-item img {
  width: 45px;
  /* Adjusted icon size */
  height: 45px;
  flex-shrink: 0;
  /* Prevent icon shrinking */
}

.right-data-item>div {
  min-width: 0;
  /* Allow text to shrink */
}

.right-data-item .label {
  font-size: 13px;
  /* Slightly larger */
  color: #ccc;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add ellipsis if text overflows */
}

.right-data-item .value {
  font-size: 15px;
  /* Slightly larger */
  font-weight: bold;
  color: #00eaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Map Markers */
.map-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  /* Stack content and arrow */
  align-items: center;
  /* Center items horizontally */
  transform: translateX(-50%);
  /* Adjust horizontal position based on center */
  z-index: 3;
  /* Above map outline */
}

.marker-content {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  /* Slightly darker background */
  padding: 4px 8px;
  border-radius: 10px;
  /* More rounded */
  margin-bottom: 4px;
  /* Space between content and arrow */
}

.marker-circle {
  background-image: url('../assets/images/home/组 47.png');
  color: #fff;
  /* border-radius: 50%; */
  width: 20px;
  /* Slightly larger */
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 6px;
  font-size: 11px;
  /* Adjusted font size */
  flex-shrink: 0;
  /* Prevent shrinking */
}

.marker-label {
  color: #eee;
  font-size: 13px;
  /* Slightly larger */
  white-space: nowrap;
}

.marker-arrow {
  width: 40px;
  /* Adjust arrow size */
  height: auto;
  display: block;
  /* Ensure it takes block space */
}

.map-marker .marker-content {
    /* Existing styles... */
    /* Apply pulse animation to the content part */
    animation: pulse 2s infinite;
    /* animation-delay: inherit; */ /* Let individual marker delay control start */
}

/* Add style for the router link wrapper if needed */
.icon-item-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Keep width calculation for initial distribution */
  /* width: calc(100% / 12 - 5px); */
  position: relative; /* Needed for absolute positioning of radial menu */
  box-sizing: border-box;
  
  /* --- NEW --- */
  /* Each item is exactly 1/12th of the CONTAINER width */
  /* The CONTAINER's width is a multiple of the viewport width */
  flex-shrink: 0;
  flex-basis: calc(100% / 12); /* This was on .icon-item, moved here and corrected logic */
  padding: 0 5px; /* Use padding instead of gap for spacing */
}

/* Radial Menu Styles */
.radial-menu {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: all; /* Allow mouse events on the menu container when visible */
    z-index: 100;
    opacity: 0;
    scale: 0.8;
    transition: opacity 0.3s ease, scale 0.3s ease;
}

/* Transition classes for radial menu fade/scale */
.radial-menu-fade-enter-active,
.radial-menu-fade-leave-active {
    transition: opacity 0.3s ease, scale 0.3s ease;
}

.radial-menu-fade-enter-from,
.radial-menu-fade-leave-to {
    opacity: 0;
    scale: 0.8;
}
.radial-menu-fade-enter-to,
.radial-menu-fade-leave-from {
    opacity: 1;
    scale: 1;
}

.radial-menu-item {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform-origin: center center;
    background-color: rgba(0, 100, 150, 0.9);
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    border: 1px solid rgba(0, 174, 255, 0.7);
    box-shadow: 0 0 5px rgba(0, 174, 255, 0.5);
    pointer-events: all; /* Ensure items are interactive */
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* When menu is active, apply calculated styles */
.radial-menu-fade-enter-active .radial-menu-item {
   opacity: 1;
   /* Transform is set by inline style from getRadialStyle */
}

.radial-menu-item:hover {
    background-color: rgba(0, 174, 255, 1);
    box-shadow: 0 0 10px rgba(0, 174, 255, 0.8);
    transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1.1); /* Slightly enlarge on hover, needs CSS vars or more JS */
     /* We'll use inline style transform for now, hover scale might be tricky */
}
</style>
